<template>
    <div class="uerManagement">
        <h5>
            <span>用户管理</span>
        </h5>
        <div class="uerManagement-header">
        <div class="search-inp">
        <div class="item" style="width:470px">
          <span class="item-text">注册时间</span>
          <el-date-picker
            v-model="dateValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        </div>
        <div class="item">
          <span class="item-text">用户身份</span>
          <el-select v-model="searchvalue" placeholder="请选择">
            <el-option
              v-for="item in searchoptions1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="item">
          <span class="item-text">手机号</span>
          <input type="text">
        </div>
        <div class="item">
          <span class="item-text">姓名</span>
          <input type="text">
        </div>
        <div class="search-btn">
          <span class="my-btn my-background">查询</span>
          <el-button @click="toggleSelection([tableData[0]])">批量删除</el-button>
        </div>
        </div>
        </div>
         <div class="table">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection">
              </el-table-column>
              <el-table-column prop="businessUserId" label="头像">
              </el-table-column>
              <el-table-column prop="shopId" label="用户昵称">
              </el-table-column>
              <el-table-column prop="shopCode" label="姓名">
              </el-table-column>
              <el-table-column prop="4" label="身份">
              </el-table-column>
              <el-table-column prop="5" label="注册手机号">
              </el-table-column>
              <el-table-column prop="6" label="注册时间">
              </el-table-column>
              <el-table-column prop="7" label="审核时间">
              </el-table-column>
              <el-table-column prop="8" label="账号状态">
              </el-table-column>
              <el-table-column prop="8" label="资金状态">
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="forbidden(scope.row)" type="text">禁用</el-button>
                    <el-button @click="thaw(scope.row)" type="text">解冻</el-button>
                    <el-button @click="detail(scope.row)" type="text">详情</el-button>
                    <el-button @click="deleted(scope.row)" type="text">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          
    </div>
</template>

<script>
export default {
    data(){
        return{
            dateValue:'',
            searchvalue:'',
            phone:'',
            name:'',
             tableData:[{businessUserId: 146, shopId: 116, shopCode: "SJ94694686", shopName: "麦多馅饼社区配餐", shopPhone: ""},
             {businessUserId: 146, shopId: 116, shopCode: "SJ94694686", shopName: "麦多馅饼社区配餐", shopPhone: ""},
             {businessUserId: 146, shopId: 116, shopCode: "SJ94694686", shopName: "麦多馅饼社区配餐", shopPhone: ""},
             ],

        }
    },
    mounted(){

    },
    methods:{
        //禁用
        forbidden(row){

        },
        //解冻
        thaw(row){

        },
        //详情
        detail(row){

        },
        //删除
        deleted(row){

        },
         toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }

    },
    watch:{
        
    }
}
</script>

<style scoped>
.uerManagement-header {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
}
    /* 搜索input框 */
.search-inp {
  display: flex;
  flex-wrap: wrap;
}
.search-inp .item {
  width: 330px;
  margin-bottom: 6px;
}
.search-inp .item-text {
  width: 100px;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
}
/* 搜索按钮 */
.search-btn {
  width: 460px;
  margin-left: 168px;
}
.search-btn span{
    margin-right: 20px;
}

.table{
    margin-top: 20px;
}
</style>